<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" type="image/x-icon" th:href="@{/images/header/header.ico}">

<style>
body {
	padding-top: 48px;
}
</style>

<title>header</title>
</head>
<body>

<div th:fragment="common">

<!-- 未登录则引入登录/注册所需的模态框 -->
	<div th:include="/htmlfragments/login::common" th:if="${session.user == null}"></div>
	<div th:include="/htmlfragments/register::common" th:if="${session.user == null}"></div>
<!-- 已登录就引入用户在线模态框 -->

	<!-- 页头 -->
	<!--响应式导航栏-->
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>

			<a th:href="@{/index.html}"	class="navbar-brand">
				<img alt="Brand" style="max-width: 200px; margin-top: -40px;" th:src="@{/images/header/logo.png}">
			</a>
		</div>

		<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active">
					<a th:href="@{/index.html}">
						<span class="glyphicon glyphicon-home"></span>主页
					</a>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<span class="glyphicon glyphicon-th-list"></span> 菜单 <b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">全部</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#">饮料</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#">小吃</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#">主食</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<!--搜索栏-->
		<form class="navbar-form navbar-left" action="#" role="search" method="get">
			<div class="form-group">
				<input name="nameKeyword" type="text" class="form-control" placeholder="Search" size="11">
			</div>
			<button type="submit" class="btn btn-primary">搜索</button>
		</form>

		<!--登录注册/用户中心、退出-->
			<ul class="nav navbar-nav navbar-right" th:if="${session.user == null}">
				<li>
					<button type="submit" class="btn btn-info navbar-btn" data-toggle="modal" data-target="#login" href="">
						<span class="glyphicon glyphicon-log-in"></span>&nbsp;登录
					</button>
				</li>
				<!-- 形成简单间隔 -->
				<li>&nbsp;&nbsp;&nbsp;</li>
				<li>
					<button type="submit" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#register" href="">
						<span class="glyphicon glyphicon-user"></span>&nbsp;注册
					</button>
				</li>
			</ul>
		<div th:if="${session.user != null}">
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="right: 30px;">
						<span class="text-primary">
							欢迎回来,<span th:text="${session.user.getUserName()}"></span>
						</span>
					</a>
					<ul class="dropdown-menu">
						<div th:if="${session.user.getUserLevel() == 1}">
							<li>
								<a th:href="@{/product/shopcart}">
									<span class="glyphicon glyphicon-shopping-cart"></span> 购物车
								</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="#">
									<span class="glyphicon glyphicon-user"></span> 个人中心
								</a>
							</li>
						</div>
						<div th:if="${session.user.getUserLevel() == 0}">
							<li>
								<a href="#">
									<span class="glyphicon glyphicon-user"></span> 管理中心
								</a>
							</li>
						</div>

						<li>
							<button type="submit" class="btn btn-danger navbar-btn" onclick="window.location.href='/user/logout'">
								<span class="glyphicon glyphicon-log-out"></span> 退出
							</button>
						</li>
					</ul>
				</li>


			</ul>
		</div>
	</div>
	</nav>

</div>
</body>
</html>